Bedah Template

Tulisan ini saya sarikan dari bukunya mbak Fanny Fariasari. Pada dasarnya, tampilan blog yang kita lihat dibentuk oleh susunan kode-kode HTML, kode-kode ini kemudian diproses oleh browser untuk kemudian ditampilkan dalam bentuk teks, gambar atau video. Nah, seperti apa sih kode-kode tersebut, yuk kita bedah bareng-bareng :-)

Masing-masing penyedia layanan blog memiliki kode-kode khusus selain kode HTML yang umum. Untuk wordpress, misalnya, memiliki kode khusus dengan tag <wp_...> sedangkan untuk Blogger memiliki tag <Blogger>, kode khusus di Blogger biasanya diawali dengan tanda <&Blog. Misalnya,

<$BlogPageTitle$> atau <$BlogTitle$>, penanda nama blog.
<$BlogURL$>, alamat blog.
<$BlogMetaData$>, informasi tentang bog kita.
dan lain sebagainya.

Bagi yang merasa asing dengan kode-kode tersebut, tentunya akan menganggap kode-kode tersebut rumit, akhirnya segan bermain ke halaman Edit HTML. Template kita pun akhirnya terlihat standar-standar saja, karena kita jarang menyentuh atau bahkan tidak pernah bermain-main dengan kode HTML template kita, kecendrungannya kita bermain aman dengan memanfaatkan Elemen Halaman.
Berikut bagian-bagian halaman blog kita disertai dengan penanda kode HTML :

a. Header Blog
Biasa ditandai dengan <!- Blog Header -> atau di dalam kode <div id="header>. Di dalamnya terdapat kode khusus untuk menampilkan judul dan deskripsi blog kita : <$BlogTitle$> dan <$BlogDescription$>.

b. Kolom Utama
Biasa dintandai dengan <!- Begin #main -> atau dalam kode <div id="main">. Bagian ini berisi artikel atau posting blog kita. Di dalamnya ada kode wajib blogger, yaitu <Blogger> dan </Blogger>, kode ini jangan sampai terhapus.

c. Kolom Sidebar
Biasa ditandai dengan <!- Begin #sidebar -> atau di dalam kode <div id="main">. Bagian ini berisi profil, arsip, dan beberapa widget atau pernak pernik seperti shoutbox, slide photo, polling dan lain sebagainya.

d. Tanggal Pembuatan Posting.
Biasa ditandai dengan <$BlogDateHeaderDate$>. Bagian ini berisi format penulisan waktu postingan kita.

e. Judul Posting.
Kodenya <$BlogItemTitle$>.

f. Isi Posting.
Kodenya <$BlogItemBody$>

g. Footer Posting.
Biasanya ditandai dengan <p class="post-footer"> dan </p>. Di dalamnya juga terdapat kode-kode untuk menampilkan beberapa keterangan seperti nickname penulis <$BlogItemAuthorNickname$>, link permanen <$BlogItemPermalinkUrl$>, dan komentar <$BlogItemCommentCount$>

h. Profil.
Biasanya ditandai dengan kode <!- Begin #profile-container -> dan diakhiri <!- End #profile ->. Kode khususnya <$BlogMemberProfile$>

i. Bagian Previous Post
Kode khususnya <$BlogPreviousItemTitle$>. Bagian ini berisi link menuju potingan yang lalu.

j. Bagian Arsip.
Biasa ditandai dengan kata Arhives, kode khususnya <$BlogArchiveName$>. Bagian ini berisi link ke arsip postingan.

k. Blog Footer.
Biasa ditandai dengan <!- Begin #footer -> dan diakhiri <!- End #footer ->. Footer terletak pada bagian paling bawah blog kita.

Kode-kode diatas tidak mutlak berada pada semua template blogger. Kode-kode ini secara default dimiliki oleh template standar yang ada pada Blogger. Untuk template hasil download dari pihak ketiga, kode-kode tersebut bisa bervariasi bentuk dan namanya. Ndak usah pusing, karena di setiap template terdapat bagian kode komentar. Kode-kode ini berfungsi sebagai penjelas bagian dari template. Kode ini diawali dengan <!- dan diakhiri ->.

Contoh :
<! Begin Sidebar -> menandakan awal kode sidebar.
<! End Sidebar -> menandakan akhir kode sidebar.

Ok, selamat membedah template anda sendiri..Jangan lupa di-backup dulu templatenya yang sekarang..Hehe..

Selengkapnya...

Icon Yahoo Messenger Status

Usut punya usut, ternyata ikon buat nampilin status YM kita di blog banyak banget..Ada 9 macam :-$ Sebenernya sih ngga terlalu berpengaruh juga kita meletakan status YM kita di blog, cuma untung-untungan aja ada yang pengunjung yang mau chat sama kita, biasanya kan cuma blogwalking, hooping, jumping, atau apalah itu..Ya kan? ;-)

Cara meletakan ikon status cukup mudah, letakan kode berikut ke dalam Elemen Halaman anda.

<a href="ymsgr:sendIM?ksatria_kennisah">
<img border="0" src="http://opi.yahoo.com/online?u=ksatria_kennisah&m=g&t=1"/> </a>

Ubah ksatria_kennisah dengan ID Yahoo anda, kemudian ubah angka 1 dengan angka yang sesuai dengan ikon yang anda inginkan. Selesai.

Selengkapnya...

Sub Halaman dalam Blogger

Ni atas request dari mas Sandi :-$
Sebenernya bikin sub halaman di Blogger (seperti tab-tab di header Blogger Banyumas yang warna merah) sih ga susah-susah amat. Fitur ini memang tidak disediakan dalam Blogger seperti dalam Wordpress, tapi dengan akalan-akalan sederhana, kita bisa membuatnya mirip seperti Wordpress ko :-)

Pertama yang perlu diperhatikan adalah mau diisi apa sub halaman kita nantinya. Kalo kita ambil contoh seperti yang di blog ini, saya membagi halaman kedalam 4 bagian : Ngoprek Blog, Rekomendasi, Blogger Banyumas, dan Link. Masing-masing sub halaman punya tema tulisan sendiri.
Nah, bagaimana cara membagi tema-tema tersebut sebenarnya sangat mudah. Saat workshop kemarin, hal pertama yang kita praktekan setelah proses pendaftaran akun Blogger adalah memposting tulisan perdana. Saat memposting, pada bagian bawah text area posting terdapat opsi pemilihan label. Label ini dapat diisi apapun sesuai dengan tema tulisan yang akan kita publish nantinya. Berangkat dari Label inilah sebenarnya ide untuk membagi blog kita ke dalam sub-sub halaman dapat terealisasikan. Sebelum anda mencoba, backup dulu template anda yang sekarang.

Berikut langkah-langkahnya :

1. Tentukan nama Label berdasarkan nama sub halaman yang akan dibuat. Klasifikasikan tema tulisan jadi beberapa tema pokok saja, jangan terlalu banyak.

2. Setelah selesai, masuk ke halaman Tata Letak dan klik Tambah Elemen Halaman. Klik ikon Label. Kemudian masukan ke dalam sidebar.

3. Setelah selesai klik Simpan, kemudian lihat hasilnya. Di bagian sidebar terdapat sederet label yang telah anda buat sebelumnya. Klik salah satu Label dan anda akan dibawa ke halaman yang hanya memuat tema-tema Label tersebut. Logikanya seperti itu, sederhana kan? Nah, untuk membuat halaman About Us, atau Tentang Kami atau apapun yang tidak membutuhkan comment, hilangkan opsi pemberian comment pada Label tersebut.

Untuk membuat navigasi khusus terkait sub halaman, anda membutuhkan kode HTML dan CSS yang diletakan terpisah. Berikut langkah-langkahnya :

1. Pada halaman blog anda, klik kanan Label yang baru saja anda masukan, kemudian klik "copy link location" atau "copy shotcut" setelah itu paste di Notepad. Ulangi langkah tersebut pada setiap label yang ada.

2. Masuk ke halaman Tata Letak, kemudian klik Elemen Halaman. Pada bagian bawah Navbar anda perhatikan apakah ada opsi untuk menambah elemen halaman. Jika tidak, anda harus membuat beberapa modifikasi di halaman Edit HTML.

2.1. Klik Edit HTML dan cari tag seperti berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Ubah maxwidgets menjadi 2 dan showaddelement menjadi yes. Hasilnya seperti ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Sebagai catatan, metode ini dapat anda gunakan pada bagian manapun. Artinya jika anda ingin menambahkan jumlah widget yang dapat ditampung oleh header, body, sidebar ataupun footer, anda tinggal mengubah parameter seperti itu. Maxwidgets menendakan jumlah Elemen Halaman yang dapat anda tambahkan, sedangkan Showaddelement akan memunculkan opsi Tambah Elemen Halaman.

3. Ok, kembali ke topik, setelah anda merubah parameter Element tadi, simpan template anda dan klik Elemen Halaman. Anda akan melihat tampilan opsi Tambah Elemen Halaman pada bagian header anda.

4. Klik Tambah Elemen Halaman, kemudian pilih HTML/Javascript, ketikan kode berikut :

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://namabloganda.blogspot.com/linklabel1.html">Depan</a></li>
<li><a href="http://namabloganda.blogspot.com/linklabel2">Tentang Saya</a></li>
<li><a href="namabloganda.blogspot.com/linklabel3">Link</a></li>
</ul>
</div>

Paste shortcut label yang tadi telah anda pindahkan ke notepad di bagian href=".."
Setelah selesai, klik Simpan.

5. Sekarang klik kembali Edit HTML, kemudian letakan kode berikut sebelum kode ]]></b:skin>

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Setelah selesai klik Simpan Template.

6. Lihat Hasilnya, jangan lupa menghapus Elemen Label yang anda masukan di sidebar sebelumnya, karena sudah tidak berguna..;p

Jika ingin merubah tampilan navigasinya, anda gunakan saja jasa pembuatan menu list di List O-Matic. Lihat Rekomendasi untuk lebih jelasnya.

Selengkapnya...

Menyembunyikan Blogger NavBar

Gambar diatas merupakan tampilan Navbar Blogger. Navbar sedikit banyak memiliki fungsi seperti shortcut dalam desktop. Bagi sebagian orang kehadiran Navbar cukup membantu, namun sebagian lagi merasa sedikit terganggu dengan tampilan navbar tersebut, karena selain mereka menginginkan space yang lebih luas pada bagian header blog, mereka juga ingin menghilangkan "image" Blogger pada blog mereka. Kalo sudah begitu menyembunyikan navbar menjadi hal yang mutlak harus dilakukan ;-)

Teknik ini sebenarnya tidak melanggar Terms of Service (TOS) yang ditawarkan oleh pihak Blogger pada saat pertama kali kita mendaftar layanan mereka, karena sependek yang saya tau, dalam TOS tersebut tidak ada kalimat yang secara eksplisit menjelaskan tentang Blogger Navbar, jadi jika kita menghilangkan Navbar tersebut sebenarnya bukan masalah, dan tidak akan melanggar TOS yang ada, tergantung kebutuhan kita aja sih..

Nah, kalo niat untuk menghilangkan Navbar ini sudah paten, copy paste kode yang dicetak tebal. Jangan lupa, backup dulu templatenya ya...

*<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================
<Variable name="mainBgColor" description=....

Sebenarnya ada banyak cara untuk menyembunyikan Navbar, tapi menurut saya ini cara yang paling mudah. Kalo cara ini tidak berhasil, coba searching di google "Removing Blogger Navbar". Ok, selamat mencoba..

Selengkapnya...

Mengganti Favicon

Favicon adalah sebuah icon kecil di address bar, untuk Blogger secara default memiliki favicon seperti ini Kita dapat mengganti favicon tersebut sesuai selera kita.
Ada beberapa situs yang menyediakan pembuatan favicon secara otomatis, untuk sekedar informasi coba anda klik :

Favicon
Chami
Free Favicon
HTML Kit


Dalam situs tersebut, anda bebas menentukan gambar apa yang akan dijadikan favicon blog anda, anda juga bisa bisa membuat animasi sederhana untuk favicon anda. Setelah selesai anda akan mendapatkan file favicon berekstensi .ico. Upload favicon tersebut ke situs image hosting seperti http://photobucket.com, anda perlu mendaftar untuk mendapatkan layanan ini. Layanan image hosting ini memiliki banyak manfaat, nanti kita bahas lain waktu ya..

Nah, copy paste kode yang ada di kolom Direct Link.

Setelah itu buka akun blogger anda, masuk ke Tab Layout dan klik subtab Edit Html.

Sebelumnya ingat, jangan lupa backup dulu template anda yang sekarang..Mbok mbokan salah gitu..

Setelah di backup, Copy paste kode dibawah ini tepat dibawah tag <head> letaknya di urutan paling atas dalam template anda.

<link rel="shortcut icon" href="Copy paste Direct Link anda disini">
<link rel="icon" href="Copy paste Direct Link anda disini" type="image/gif">

Untuk template yang telah dimodifikasi letakan tag tersebut seperti ini :
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<link href='Copy paste Direct Link anda disini' rel='icon' type='image/gif'/>

Kemudian klik Save Template..Selesai.

Selengkapnya...

Ganti Template Yuk..

Saat workshop kemarin, kita sempat memilih satu dari beberapa template yang telah disediakan oleh Blogger secara default. Template yang sekarang digunakan tentu saja bisa dirubah menurut selera kita. Yuk kita coba rubah template kita :-$

Blogger memiliki dua versi template, pertama template klasik yang berupa html, dan versi beta yang memungkinkan kita memasukkan template dengan format xml. Untuk sekedar informasi, banyak sekali situs penyedia template gratis untuk blogger yang bisa kita temukan. Coba saja ketikan "Blogger Templates" di google, anda akan menjumpai puluhan situs yang menyediakan template blogger. Beberapa diantaranya :

Blogger Templates
Blogspot Templates
Fresh Blogger Templates

Asiknya hanya dengan beberapa modifikasi kita bisa mendapatkan template yang berbeda dengan yang sudah kita download sebelumnya.

Untuk blogger versi klasik, kita harus copy paste kode yang telah kita dapat. Sedangkan untuk blogger versi beta, kita hanya tinggal mengupload template yang sudah kita download. Berikut langkah mengganti template untuk blogger versi beta :

1. Dari jendela kontrol panel, klik tab Tata Letak, kemudian klik sub tab Edit HTML.



2. Backup dulu template yang saat ini ada. Copy paste kode template ke editor teks seperti notepad, kemudian di save. Jangan lupa klik Expand widgets Template agar semua kode HTML muncul, karena secara default, blogger menyembunyikan kode html untuk widget.

3. Cari template yang anda inginkan di google, download dan simpan di hard disk anda.




4. Klik Browse di halaman Edit HTML, kemudian cari template yang telah anda download sebelumnya. Setelah itu klik Upload. Jangan meng-copy paste-kan kode html secara langsung. Selalu gunakan fitur Browse dan Upload untuk mengganti template anda. Ingat, blogger versi beta menyembunyikan kode widgets untuk template anda, copy paste kode HTML tidak akan bekerja.



5. Setelah itu, anda akan mendapat konfirmasi prihal penghapusan widget anda, klik saja.....Widget dalam template yang sudah anda save sebelumnya dapat dimasukkan kembali.

6. Klik Save Changes, selesai.

Untuk mengembalikan widget yang sudah anda masukan sebelumnya memang membutuhkan ekstra ketelitian, karena salah mem-paste-kan kode widget, bisa-bisa widget anda tidak akan muncul di template. Anda harus paham benar perbedaab dan persamaan struktur HTML template yang baru dengan yang sebelumnya. Agar lebih mudah, buka kedua template tersebut dalam editor teks seperti notepad, kemudian pelajari strukturnya, dari situ anda dapat menentukkan posisi yang tepat untuk mem-paste-kan kode HTML widget anda.

Atau untuk lebih mudah, anda tinggal masuk ke halaman Edit Elemen Halaman kemudian menambahkan Elemen Halaman (Widget) yang telah dihapus. Isikan kode widget sesuai dengan yang sebelumnya. Misal anda ingin memajang kembali widget cbox/tagboard/buku tamu, anda tinggal sign in ke situs penyedia widget tersebut menggunakan akun yang telah dibuat sebelumnya. Kemudian copy paste kembali kode HTML atau Javascript ke dalam Elemen Halam..Selesai..

Selengkapnya...

Awalan..

Sebenernya bingung nih mau diisi apaan :-p, soalnya banyak banget trik yang bisa dipake buat mempercantik, memperindah, (whatever..) blog kita. Cuma biasanya kita terlalu terburu-buru buat langsung ngutak-ngatik blog kita, tanpa memperhatikan beberapa "prinsip" dasar dalam ngeblog..ciee..Ni gw ambil dari http://lbsfighter.blogspot.com
Sekalian refresh lagi materi yang udah di dapet di workshop kemaren :-D

1) Pilih topik yang betul-betul anda kuasai, anda sukai, dan topik yang membuat anda selalu bersemangat. Dengan cara ini membuat anda tidak akan bosan dan akan membuat pembaca anda selalu tertarik dan terus menerus bertanya.

2) Pilih topik yang tidak banyak persaingannya. Jika topik anda terlalu umum, coba fokus untuk membahas secara lebih spesifik. Sebagai contoh, banyak situs yang membahas tentang mobil, tetapi sedikit sekali yang mengkhususkan pada satu merek, dan bahkan lebih sedikit yang mengkhususkan pada satu model saja. Kunci untuk sukses adalah menemukan suatu topik yang cukup spesifik tapi dengan pembaca/peminat yang banyak.

3) Daftar di www.blogger.com, Gratis dan mudah untuk digunakan. Untuk cara-cara mendaftar di www.blogger.com anda bisa lihat disini.

4) Gunakan template yang sederhana, lebih disukai dengan latar belakang putih. Format ini lebih mudah dibaca dan lebih enak di pandang mata ketika dikombinasikan dengan gambar berwarna.

5) Gunakan gambar untuk memperindah blog anda dan memberi penampilan yang lebih profesional. Anda dapat melihat gambar yang bagus dengan biaya yang sangat murah di www.istockphoto.com, atau bahkan gambar gratis di www.flickr.com, jangan lupa permisi pada pemilik gambar tersebut sebelum menggunakannya.

6) Pada sidebar, buat minimal 10 link situs-situs yang berhubungan dengan topik bahasan anda. Ketika robot mesin pencari mengunjungi blog anda, mesin pencari akan menemukan link-link ini dan blog anda akan memperoleh manfaatnya.

7) Tulislah dengan bahasa yang sederhana, dengan paragrap yang pendek-pendek jangan terlalu panjang karena akan membuat pembaca anda merasa bosan bahkan membuat mereka tidak jadi membacanya. Ini merupakan petunjuk yang penting untuk penulisan dalam web, dan akan membuat postingan anda mudah dibaca dan dimengerti.

8) Selalu membuat link pada sumber-sumber yang anda gunakan untuk potingan anda. Ini bukan hanya etika yang baik tapi juga suatu cara untuk mempromosikan blog anda dan mendapatkan link, ketika orang yang anda link menemukan bahwa situs mereka sudah dilink, hampir bisa dipastikan bahwa mereka akan melinkkan kepostingan anda dari situs atau blog mereka.

9) Periksa kesalahan ejaan dan tatabahasa, ini akan membuat blog anda terlihat lebih profesional dan akan memungkinkan meningkatnya orang untuk melink blog anda.

10) Buat penggolangan untuk postingan anda dan jaga agar blog anda terorganisasi dengan rapi. Blogger baru-baru ini telah memodifikasi sofwarenya untuk mengijinkan penggunaan label.

11) Berpartisipasi aktif di forum-forum dan kelompok diskusi yang berhubungan dengan topik anda. Temukan apa pertanyaan yang paling umum dan sediakan solusinya di blog anda. Kemudian, arahkan para pembaca forum untuk mengunjungi blog anda. Coba juga untuk mengarahkan pembaca forum untuk membaca postingan anda yang lain, atau menjawab dengan tetap menyediakan link ke blog anda. Jika tidak, mungkin anda hanya sekedar untuk mempromosikan blog/situs anda.

12) Kasi kebebasan bagi pembaca blog anda untuk meng-email-kan postingan anda ke teman-teman mereka, keluarga, rekan bisnis, atau ke orang lain. Juga, berikan mereka pilihan untuk mem-bookmark postingan anda menggunakan del.icio.us, furl, atau beberapa “bookmarking service” yang lain. Anda bisa melihatnya di AddThis untuk mendownload sebuah “smart button” yang membuat “bookmark post” anda jadi mudah. Kamu dapat menemukan instruksi bagaimana cara menambahkan tombol itu ke Blogger disini. Cara termudah untuk men-sharing-kan postingan blog anda dan mendapatkan relevan traffic ke blog anda.

13) Gunakan Technorati tag pada akhir dari postingan blog anda. Technorati tag adalah salah satu cara untuk menggolongkan postingan anda dan mempromosikannya kepada pengunjung internet.

Selengkapnya...